<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的团队</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/jquery.min.js"></script>

		<style type="text/css">
			*{
				margin: 0rem;
				padding: 0rem;
				text-decoration: none;
				list-style: none;
				
			}
			html,body{
				background-color: #fff;
				width: 100%;
				height: 100%;
				 /*font-size:  100rem;*/
				 font-size: calc(100vw / 7.5);
				 font-family: "microsoft yahei";
			}
		
			/*内容*/
			.content{
				box-sizing: border-box;
				padding: 0rem 0.32rem;
				width: 100%;
			}
			.content .top{
				widow: 100%;
				height: 1.76rem;
			}
			.content .top .left{
				position: relative;
				display: inline-block;
				width: 1.76rem;
				height: 100%;
			}
			.content .top .left img{
				position: absolute;
				top: 50%;
				left: 50%;
				width:1.38rem;
				height: 1.38rem;
				margin-top:-0.69rem;
				margin-left: -0.69rem;
			}
			.content .top .right{
				vertical-align: top;
				height: 100%;
				display: inline-block;
			}
			.content .right .title{
				font-size: 0.26rem;
				color: #143550;
				margin: 0.2rem 0rem;
			}
			.content .top .right .title .info{
				font-weight: bold;
			}
			.content .top .right .info-box{
				font-size: 0.21rem;
				color: #9a9a9a;
			}
			.middle{
				/*position: absolute;
				top: 2.65rem;
				left: 0rem;*/
				width: 7.5rem;
				height: 0.97rem;
				background-color: #f4f5f9;
				line-height: 0.97rem;
				text-align: center;
				font-size: 0.26rem;
				color: #143550;
			}
			.main{
				box-sizing: border-box;
				padding: 0rem 0.32rem;
				width: 100%;
			}
			.main .tab{
				width:100%;
				height: 0.91rem;
				display: flex;
			}
			.main .tab .item{
				flex: 1;
				height: 0.91rem;
				line-height: 0.91rem;
				text-align: center;
				font-size: 0.26rem;
				color: #9a9a9a;
			}
			.main .tab .active{
				color: #143550;
				font-weight: bold;
				border-bottom:0.01rem solid #143550;
			}
			
			.main .tab-info{
				widow: 100%;
				height: 2.2rem;
			}
			.main .tab-info .info-wrapper{
				width: 100%;
				height: 2.2rem;
			}
			.main .tab-info .left{
				position: relative;
				display: inline-block;
				width: 1.76rem;
				height: 100%;
			}
			.main .tab-info .left img{
				position: absolute;
				top: 50%;
				left: 50%;
				width:1.38rem;
				height: 1.38rem;
				margin-top:-0.69rem;
				margin-left: -0.69rem;
			}
			.main .tab-info .right{
				vertical-align: top;
				height: 100%;
				display: inline-block;
			}
			.main .tab-info .right .title{
				font-size: 0.26rem;
				color: #143550;
				margin: 0.2rem 0rem 0.1rem;
			}
			.main .tab-info .right .title .info{
				font-weight: bold;
			}
			.main .tab-info .right .info-box{
				font-size: 0.21rem;
				color: #9a9a9a;
			}
			
		</style>
	</head>

	<body>
		<script>
			$(function(){

				$("#wrapper").load("../header.html");


				
			})
			setTimeout(function(){
				$("#wrapper").find(".con").html("我的团队").end().find(".dot img").css("display","none");
				$(".arrow").on("tap",function(){
				window.location.href = "./index.html";
			})
			},200)
			setTimeout(function(){
				$("#wrapper").find(".con").html("我的团队").end().find(".dot img").css("display","none");
				$(".arrow").on("tap",function(){
				window.location.href = "./index.html";
			})
			},2000)
		</script>
		
		<div class="wrapper" id="wrapper"></div>
		<!--内容-->
		<div class="content">
			<div class="top">
				<div class="left">
					<img src="" alt="">
				</div>
				<ul class="right">
					<li class="title">
						<span class="info" id="info"></span>
						<span>（推荐人）</span>
					</li>
					<li class="info-box">
						<span>手机号：</span>
						<span class="info" id="mobile"></span>
					</li>
					<li class="info-box">
						<span >注册时间：</span>
						<span class="info" id="time"></span>
					</li>
				</ul>
			</div>
		</div>
		<div class="middle">伞下团队总人数：<span class="info" id="total"></span></div>
		<div class="main">
			<div class="tab">
				<div class="item active one" type="1">直推人数<span>0</span></div>
				<div class="item two" type="2">二级人数<span>0</span></div>
				<div class="item three" type="3">三级人数<span>0</span></div>
				<div class="item four" type="4">四级人数<span>0</span></div>
			</div>
			<div id="content">

			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script>
			var type = 1;
			$(".tab").on("click","div",function(){
			    // console.log(2)
			    $(".tab").find(".active").removeClass("active")
				$(this).addClass("active")
				type= $(this).attr("type")
				render(type)
			})
			render(type);
			function render(type){
			    console.log(type);
                $.ajax({
                    type: "POST",
                    url:`${localStorage.top}/api/UserCenter/my_team?TOKEN=${localStorage.token}`,
                    dataType:"json",   //返回格式为json
                    data:{
                        level:`${type}`,
                    },
                    success: function (data){
                        console.log(data)
						$("#info").html(`${localStorage.nickname}`)
						$(".left img").attr("src",data.data.avatar)
						$("#mobile").html(data.data.mobile)
						$("#time").html(data.data.jointime)
						$("#total").html(data.data.total_count)
                        var html='';
                        console.log(data.data.list.length);
						
						$(".one span").html(`${data.data.count_1}`)
						$(".two span").html(`${data.data.count_2}`)
						$(".three span").html(`${data.data.count_3}`)
						$(".four span").html(`${data.data.count_4}`)

                        renderList(data.data.list)
                    }
                })

            }
			function renderList(data){
				var str ="";
				for(var i = 0; i<data.length;i++){
					str += `<div class="tab-info">
				<div class="info-wrapper">
					<div class="left">
						<img src="${data[i].avatar}" alt="">
					</div>
					<ul class="right">
						<li class="title">
							<span class="info">${data[i].nickname}</span>
							<span>（推荐人）</span>
						</li>
						<li class="info-box">
							<span class="info">普通会员</span>
						</li>
						<li class="info-box">
							<span>手机号：</span>
							<span class="info">${data[i].mobile}</span>
						</li>
						<li class="info-box">
							<span >注册时间：</span>
							<span class="info">${data[i].jointime}</span>
						</li>
					</ul>
				</div>
			</div>`
				}
				$("#content").html(str);
			}



		</script>
	</body>
</html>